import React, {Component} from "react";
import {Card, Col, Row, Statistic, Typography} from "antd";
import {inject, observer} from "mobx-react";

const {Title} = Typography;


export default @inject('store') @observer
class AdminHome extends Component {
    constructor(props) {
        super(props);

        this.state = {
            machine_all_count: 0,
            machine_running_count: 0,
            machine_stopped_count: 0,
            worker_all_count: 0,
            worker_running_count: 0,
            worker_stopped_count: 0,
        };
    }

    componentDidMount() {
        this._home();
    }

    _home() {
        window.$http.postForm("/home", {}).then(res => {
            if (res.status === 10000) {
                // console.log("result", res.result);
                console.log("res", res);
                this.setState({
                    machine_all_count: res.machine_all_count,
                    machine_running_count: res.machine_running_count,
                    machine_stopped_count: res.machine_stopped_count,
                    worker_all_count: res.worker_all_count,
                    worker_running_count: res.worker_running_count,
                    worker_stopped_count: res.worker_stopped_count
                });
                // this.setState({columns: res.columns, result: res.result});
                return
            }
            window.$message.warn(res.message);
        }).catch(err => {
            window.$message.error(err.message);
        });
    }

    /*
    * 1.工作运行状态统计
    * 2.最新爬取数据展示(尝试)
    * */
    render() {
        const cardBottom = 10;
        const colSpan = 4;
        return <div>
            <Title level={3}>概况</Title>
            <div>
                <Title level={4} type={"secondary"}> 机器状态 </Title>
                <Row gutter={10}>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="总机器数"
                                value={this.state.machine_all_count}
                                valueStyle={{color: '#3f8600'}}
                                suffix="台"
                            />
                        </Card>
                    </Col>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="正在运行"
                                value={this.state.machine_running_count}
                                valueStyle={{color: '#3f8600'}}
                                // prefix={<ArrowDownOutlined/>}
                                suffix="台"
                            />
                        </Card>
                    </Col>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="已停止"
                                value={this.state.machine_stopped_count}
                                valueStyle={{color: '#cf1322'}}
                                // prefix={<ArrowDownOutlined/>}
                                suffix="台"
                            />
                        </Card>
                    </Col>
                </Row>
            </div>
            <div>
                <Title level={4} type={"secondary"}> 程序状态 </Title>
                <Row gutter={10}>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="总程序数"
                                value={this.state.worker_all_count}
                                valueStyle={{color: '#3f8600'}}
                            />
                        </Card>
                    </Col>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="正在运行"
                                value={this.state.worker_running_count}
                                valueStyle={{color: '#3f8600'}}
                                // prefix={<ArrowDownOutlined/>}
                            />
                        </Card>
                    </Col>
                    <Col span={colSpan}>
                        <Card style={{marginBottom: cardBottom}}>
                            <Statistic
                                title="已停止"
                                value={this.state.worker_stopped_count}
                                valueStyle={{color: '#cf1322'}}
                                // prefix={<ArrowDownOutlined/>}
                            />
                        </Card>
                    </Col>
                </Row>
            </div>
        </div>
    }
}